<template>
		<view class="container" >
		<view  class="header" :style="{ 'background-image':  `url(${containerBgUrl})`}">
			<text>管理</text>
			<view class="header_box" @click="login">
				<image :src="userInfo.avatarUrl ? userInfo.avatarUrl:defaultAvatarUrl"
				 :class="{'box_shadow':userInfo.avatarUrl}"></image>
				<view class="flex_around_column" >
					<view v-if="userInfo.nickName">
					{{userInfo.nickName}}
					</view>
					<view v-if="userInfo.city">
					{{userInfo.city}}
					</view>
					<view v-if="!userInfo.nickName">点击进行登录</view>
				</view>
			</view>	
		</view>
		
		<view class="box_shadow user_info_box look">
			
			<view class="left-brtween">
				<view >辰燃家园 <view @click="enterMarketing">去看看</view></view>
				<view >可燃气安全监测领航者</view>
			</view>
			<image src="../../../static/img/pic_login.png" mode=""></image> 
		</view>
		<view class="box_shadow user_info_box"  >
			<view class="flex_between_row" v-if="userInfoByApi.orgName">
				<view>
					<text>所在单位</text>
				</view>
				<view >
					<input class="uni-input" disabled v-model="userInfoByApi.orgName" />
				</view>
			</view>
			<view class="flex_between_row" >
				<view>
					<text>所属角色</text>
				</view>
				<view >
					<input class="uni-input" disabled v-model="userInfoByApi.roleName" />
				</view>
			</view>
			
		<!-- 	<view class="flex_between_row" >
				<view >
					<text>报警推送</text>
				</view>
				<switch @click="requestSubscribeMessageFn" :checked="isSubscribed" disabled="true" color="rgba(65, 115, 241, 1)" />
			</view> -->
		</view>
		<view class="foot-version">
			<view class="box_shadow flex_between_foot" >
				<image src="../../../static/img/icon-use.png" mode=""></image>
				<view class="foot-text" @click="enterFcuntion"> 
					<text>使用介绍</text>
					<text>了解产品功能</text>
				</view>
			</view>
			<view class="box_shadow flex_between_foot"  >
				<image src="../../../static/img/icon-version.png" mode=""></image>
				<view class="foot-text" @click="enterVersion">
					<text>版本</text>
					<text>{{about}}</text>
				</view>
			</view>
		</view>
		<navigator class="box_shadow  sign_out_btn" hover-class="none" target="miniProgram" open-type="exit">退出</navigator> 
		<!-- <button v-show="isCanUse" plain class="changeRoleBtn" open-type="openSetting" lang="zh_CN" @opensetting="openSetting">解除绑定
		<text>(需先关闭用户授权)</text>
		</button> -->
		
	</view>
</template>

<script>
import {mapActions, mapState} from 'vuex'
import urlConfig from '../../../common/config.js'
let vm ;
import { mixin } from '../../../common/mixins.js';

export default {
	data() {
		return {
			urlConfig,
			boolShow:false,
			userInfoByApi:{
				orgName: "",
				roleName: "",
				userId: "",
				userName: ""
			},
			defaultAvatarUrl:'../../../static/img/default_user.png',
			about:'版本号 v2.0.0',
			pwd:'******',
			phoneNumber:'',
			isCanUse:false
		};
	},
	mixins: [mixin],
	computed: {
		...mapState({
			//这里可以通过这种方式引用相应模块的state数据，其中user是模块名。在代码的其他部分可以使用this.userInfo访问数据
			userInfo: ({user}) => user.userInfo?user.userInfo:"会飞的鱼",
			isSubscribed: ({ tmplate }) => tmplate.isSubscribed
		})
	},
	onShow() {
		vm = this
		vm.getUserInfoFn()
		
		uni.getStorage({
			key:'userinfo',
			success(data){
				if(vm.userInfoByApi.roleName !== '游客'){
					vm.getMainSwitch()//判断是否打开了订阅总开关
				}
				if(data.data.nickName){
					vm.isCanUse = true
				}else{
					vm.isCanUse = false
				}
			},
			fail(error) {
				vm.isCanUse = false
				
				vm.setUserInfo({})
				vm.userInfoByApi = {}
			}
		})
		
		uni.removeStorage({
			key:'monitorDetail'
		})
		uni.removeStorage({
			key:'realtimeMonitorDetail'
		})
		uni.removeStorage({
			key:'curMarkerId'
		})
		
	},
	methods: {
		...mapActions('user', ['setUserInfo']),
		login(){
			if(!this.userInfo.nickName){
				uni.navigateTo({
					url:'../../views/login/login'
				})
			}
		},
		getUserInfoFn(){
			uni.getStorage({
				key:'userInfoByApi',
				success(data){
					vm.userInfoByApi = data.data
				},
				fail() {
					vm.$api
					.getUserInfo({
						userName:vm.userInfo.nickName
					})
					.then(res => {
						vm.userInfoByApi = res.data
					});	
				}
			})
		},
		openSetting(data){
			if(data.detail.authSetting['scope.userInfo'] == false){ //用户关闭了授权
				vm.isCanUse = false
				uni.removeStorage({
					key:'userInfoByApi'
				})
				vm.setUserInfo({})
				vm.userInfoByApi = {
					roleName:'游客'
				}
			}
			
		},
		enterMarketing(){
			uni.navigateTo({
				url:`/pages/views/userManager/marketing`,
			})
		},
		enterVersion(){
			uni.navigateTo({
				url:`/pages/views/userManager/versionInfo`,
			})
		},
		enterFcuntion(){
			uni.navigateTo({
				url:`/pages/views/userManager/function`,
			})
		}
		
	}
};
</script>

<style lang="scss" scoped>
switch {
	transform: scale(0.7) translateX(40rpx);
}
.container{
	min-height: 100vh;
	background: linear-gradient(0deg, #F0F6F9 0%, $uni-border-color 100%);
	.header{
		background-repeat: no-repeat;
		background-position: right 50rpx;
		background-size: contain;
		margin-top: 116rpx;
		text{
			font-size: 36rpx;
			font-weight: 800;
			color: #000000;
			position: absolute;
			text-align: center;
			width: 100%;
		}
	}
}
.header_box{
	height: 453rpx;
	display: flex;
	align-items: center;
	padding: 100rpx 0 0 $uni-spacing-col-36;
	image{
		width: 156rpx;
		height: 156rpx;
		border-radius: 50%;
		margin-right: 40rpx;
	}
	.flex_around_column{
		height: 100rpx;
		color: $uni-border-color;
		align-items: flex-start;
		view{
			height: 50rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			color: #666666;
		}
		view:first-child{
			font-weight: 600;
			font-size: $uni-spacing-col-36;
			color: #111111;
		}
		image{
			width: 80rpx;
		}
	}
}
.foot-version{
		width: 100%;
		display: flex;
		flex-direction: row;
		margin:0 $uni-spacing-col-36;
		.flex_between_foot{
		background: $uni-border-color;
		 // height: 193rpx;
		 border-radius: 16rpx;
         width: 43%;
		 padding:56rpx $uni-spacing-col-36;
		 display: flex;
		 flex-direction: row;
		 image{
		 	width: 80rpx;
		 	height: 80rpx;
		 	margin-right: 20rpx;
		 	}
	    .foot-text{
			 display: flex;
			 flex-direction: column;
			 // font-weight: Medium;
			 // font-size: 36rpx;
			 // font-weight: 500;
			 // color: #111111;
			 // line-height: 26px;
			 text:first-child{
			 	font-size: 30rpx;
			 	font-weight: 500;
			 	color: #111111;
			 }
			 text:last-child{
			 	font-weight: 400;
			 	font-size: 28rpx;
			 	color:#666666;
			     padding-top: 5rpx;
			 }
		}				
		 &:last-child{
		 	margin-left:$uni-spacing-col-36;
		 }
 }

}
.look{
	margin-top:-25rpx!important;
	padding-left: $uni-spacing-col-36;
	display: flex;
	flex-direction: row;
	.left-brtween{
		margin: 45rpx 45rpx 0 0;
		view:first-child{
			display: flex;
			align-items: center;
			font-weight: bold;
			color: #111111;
			font-size: 36rpx;
			line-height: 70rpx;
			view{
				font-weight: 500;
				color: #4187F1;
				border: 1px solid #4187F1;
				border-radius: 18rpx;
				width: 110rpx;
				margin-left: 25rpx;
				font-size: 28rpx;
				padding: 0 15rpx;
				height: 36rpx;
			}
		}
		view:last-child{
			font-weight: 400;
			color: #666666;
			font-size: 24rpx !important;
		}
	}
	image{
		width: 300rpx;
		height: 198rpx;
		}
	}
.user_info_box{
	border-radius: 16rpx;
	position:relative;
	background: $uni-border-color;
	margin: $uni-spacing-col-36;
	.flex_between_row{
		height: 110rpx;
		// margin-bottom: 20rpx;
		margin:0 $uni-spacing-col-36;
	
		border-bottom: 1rpx solid rgba(211, 211, 211, 0.2);
		view:first-child{
			display: flex;
			align-items: center;
			text{
				font-size: 30rpx;
				width: 220rpx;
				font-weight: 500;
				color: #111111;
			}
		}
		view:last-child{
			width: calc(100% - 220rpx);
			flex-shrink: 0;
			input{
				font-size: 30rpx;
				height: 100%;
				width: 100%;
				text-align: right;
				color: #666666;
				font-weight: 500;
			}
		}
		&:last-child{
			border-bottom:none;
		}
	}
}
.sign_out_btn{
	height: 88rpx;
	line-height:96rpx;
	margin: $uni-spacing-col-36;
	border-radius: 10rpx;
	background: $uni-border-color;
	text-align: center;
	letter-spacing: 4rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #111111;
}
.changeRoleBtn{
	position: absolute;
	bottom: 160rpx;
	height: 72rpx;
	line-height: 72rpx;
	right: 26rpx;
	left: 26rpx;
	border-radius: 10rpx;
	background: $uni-border-color;
	color: #333;
	text-align: center;
	letter-spacing: 4rpx;
	border: none;
	outline: none;
	width: auto;
	text{
		font-size: 12px;
		color: #999;
	}
}
.feedbackBtn{
	position: absolute;
	bottom: 260rpx;
	height: 72rpx;
	line-height: 72rpx;
	right: 26rpx;
	left: 26rpx;
	border-radius: 10rpx;
	background: $uni-border-color;
	color: #333;
	text-align: center;
	letter-spacing: 4rpx;
	border: none;
	outline: none;
	width: auto;
}
</style>
